<script setup>
//导入pinia数据

import { ref } from "vue";
import {userInfoStore} from "../stores/UserInfoPinaStores.js"
//导入路由
import  {useRouter} from 'vue-router';
const router=useRouter();

let user= userInfoStore()
//使用pinia数据源  尽可能使用函数去获取属性


//退出功能
function userLayout(){
    user.$reset();
    router.push("/login")
}

</script>

<template>
    <div class="bar">   
        <div  id="login_log" class="bar_t"><img src="../public/img/logo.jpg"/></div>
        <div id="center_title" class="bar_t"><h2>某高校宿舍水电费界面</h2></div>
        <div  class="bar_t right" v-if="user.getUserName==''"></div>  
        <div  class="bar_t right" v-if="user.getUserName!=''"  >
            欢迎<span v-text="user.getUserName"></span>
            <button style="display: inline-block; background-color: chocolate;" @click="userLayout()">退出</button>
        </div>
        
    </div>
</template>

<style scoped>
.bar{
    height: 40px;
    width: 100% ;
    background-color: rgb(230, 137, 15);
}

/*
    标题框控制
*/
.bar_t{
    display: inline-block;    
}
#login_log{
    
    float: left;
}
.right{
    float: right;
}
</style>
